前言

有注意到每次實作練習的最前面都會有個-觀察功能需求項目嗎？這是在饅頭計畫中老師特別強調要拉出來製作的部分，後來看其他技術文或是六角學院課程也會提到這部分的重要性，在開始一個作品前，都要先去了解要製作哪些項目，將它拆解，並大約知道可以用什麼方式來製作，可以快速進入狀況、減少緊張感並依據整理出的項目一項項完成，即便中斷也能快速銜接上未完成的部分。

課程連結
成品

觀察功能需求

1.隨著頁面的往下捲動，會載入新的資料

• 一開始頁面載入，會呈現5筆資料，捲動往下，會再載入5筆
• 使用{JSON} Placeholder的資料來串接(運用ajax)
• 設定捲動位置，並於該位置時，會呈現載入的圖示
• setTimeout來呈現載入的時間與畫面

2.網頁的各資料是有順序，資料左上會有編碼

• 利用資料本身的id作為序號
• 於JS時，帶入該變數取值

各項拆解說明

1.API資料來源:

• jsonplaceholder 為取得資料的位置
• 抓取5筆的方式，後面參數的設定而來
  https://jsonplaceholder.typicode.com/posts?_limit5

2.使用ajax串接API

• Async/Await 非同步流程控制-筆記
• 參考Using async await with jQuery's $.ajax、How to await the ajax request?，使用jQuery's $.ajax執行async
• 在try裡面，放入一般$.ajax抓取API資料的方式，如url、type、dataType
• 首先，在連結的部分，我們希望每次抓取5筆資料，呈現1頁，所以在外面設置let limit = 5;let page = 1於url中加入該變數
• 在抓取資料成功時，放入function，並用$.each來執行
  • 在$.each先傳入該資料(data)陣列，其function (index, value)放入索引以及值的內容。
  • 宣告postEl變數，創造名為post的div=> $('\<div />')
  • 加入postclass
  • 加入html
  • 最後將此變數，放置呈現文章的容器postEl.appendTo('#posts-container');

let limit = 5
let page = 1

async function doAjax() {
  let result;

  try {
    result = await $.ajax({
      url: `https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`,
      type: 'get',
      dataType: 'json',
      success: function (data) {
      
      $.each(data, function (index, value) {
          const postEl = $('<div />').addClass('post').html(`<div class="number">${value.id}</div> <div class="post-info"><h2 class="post-title">${value.title}</h2><p class="post-body">${value.body}</p>
      </div>`)
          //console.log(postEl)
          postEl.appendTo('#posts-container');
          //$('#posts-container').append(postEl)

        });

       
      }
    });

    return result;
  } catch (error) {
    console.error(error);
  }

}

doAjax();

查看是否有成功取得資料： console.log(data);

參考資料：
使用jQuery創造div
https://stackoverflow.com/questions/10402567/jquery-div-vs-div
jQuery.each()

3.Infinite Scroll無限捲動(瀑布流)

• scrollTop網頁右邊的卷軸到最上端網頁的距離有多少
• scrollHeight 取得整個沒被擋住的高、clientHeight 取得元素的高度（含padding 不含 border）
• 完整內容高度 (scrollHeight) = 內容頂端與捲軸頂端的距離 (scrollTop) + 捲軸本身高度 (clientHeight) + 內容底端與捲軸底端的距離。

例子:

$(function () {
  $(window).scroll(function () {
    var scrollVal = $(this).scrollTop();
    $("span.qScrollTop").text(scrollVal);
  });
});

if(scrollVal > 500){
  /* 如果滾動的物件捲動 > 500 則觸發指定的動作。*/
}

• 注意：window本身沒有scrollTop/Left這個屬性，所以window.scrollTop是undefined的
  所以可能要從body、document來取得

本段落語法：

• 上述說明各視窗高度，在此if判斷式中scrollTop + clientHeight >= scrollHeight - 5來計算，當捲軸捲到該位置時，要呈現載入畫面
• 接著根據載入畫面函式，來放入載入以及呈現接續畫面得設定
  • 使用setTimeout()，在1秒後消除載入圖示，接著在300毫秒後，馬上換頁執行載入新資料

$(window).scroll(function () {
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $('body').prop("scrollHeight");
  //一樣 var scrollHeight2 = document.documentElement.scrollHeight;
  var clientHeight = document.documentElement.clientHeight;
  //https://stackoverflow.com/questions/10423759/plain-javascript-to-jquery-clientheight

  // console.log('scrollTop:', scrollTop);
  // console.log('scrollHeight:', scrollHeight);
  // console.log('clientHeight:', clientHeight);


  if (scrollTop + clientHeight >= scrollHeight - 5) {
    //console.log('show up 123')
    showLoading();
  }
})


//顯示載入圖示，並取得更多串接資料
function showLoading() {
  $('.loader').addClass('show');


  setTimeout(function () {

    $('.loader').removeClass('show');
    setTimeout(function () {
      page++;
      doAjax();
    }, 300);

  }, 1000);  //1秒之後消失

}

參考資料：
[筆記] 計算網頁底部位置，當網頁達到底部時才產生效果─jQuery
一次搞懂 clientHeight/scrollHeight/scrollTop的區別

4.篩選輸入框資料

• 綁定事件為.keyup指放開鍵盤的那個剎那，觸發該事件
• 執行的函式內容為：
  • var text取得輸入值並轉為小寫
  • 利用迴圈，去搜尋關鍵字，判斷，值轉為小寫文字的內容是否符合條件
  • -1 ：意指條件不符合
  • indexOf() 方法用來判斷字串字串變數中是否包含某字串。

//輸入框搜尋//https://makitweb.com/jquery-search-text-in-the-element-with-contains-selector/  (=>Loop all .content )
  $('#filter').keyup(function () {

    // 輸入值的搜尋
    var text = $('#filter').val().toLowerCase();

    // 隱藏所有資料
    $('.post').hide();

    // 迴圈搜尋整個文件
    $('.post').each(function () {

      if ($(this).text().toLowerCase().indexOf("" + text + "") != -1) {
        $(this).closest('.post').show();
      }
    });

參考資料：
比較 keydown, keypress, keyup 的差異
jQuery – Search text in the Element with :contains() Selector
JavaScript String indexOf()